import React, { PureComponent } from 'react';
import { ListItem, ListInfo, LoadMore } from '../styled';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { actionTypes } from '../store';

class List extends PureComponent {
	render() {
		const { List, getMoreList, page } = this.props;
		return(
			<div>
				{List.map((item, index) => {
					return(
						<Link key={index} to={'/detail/' + item.get('id')}>
							<ListItem>
							<img src={item.get('imgUrl')} alt="" />
							<ListInfo>
								<h3>{item.get('title')}</h3>
								<p>{item.get('desc')}</p>
							</ListInfo>
					</ListItem>
						</Link>
					)
				})}
				<LoadMore onClick={() => getMoreList(page)}>查看更多</LoadMore>
			</div>
		)
	}
}

const mapState = (state) => ({
	List: state.getIn(['home', 'articleList']),
	page: state.getIn(['home', 'articlePage'])
})

const mapDispatch =(dispatch) => ({
	getMoreList(page){
		dispatch(actionTypes.getMorelist(page))
	}
})

export default connect(mapState, mapDispatch)(List);